<template>
	<view class="wrap">
		<view class="bottom-card">
			<view class="bottom-cad-title">
				纸质遗嘱上传
			</view>
			<view class="bootom-second">
				上传扫描的A4纸照片
			</view>
			<view class="upload-btn" @click="uploadImage">
				<image src="../../static/images/camera.png" mode="widthFix" style="width:53rpx;height: 45rpx;">
				</image>
			</view>
			<view class="image-box">
				<view class="image-item" v-for="(item,index) in imageUrl" :key="index">
					<view class="close-btn" @click="deleteImage(index)">
						<image src="../../static/images/close.png" mode="aspectFill" style="height: 100%;width: 100%;">
						</image>
					</view>
					<image :src="item" mode="aspectFill" style="height: 100%;width: 100%;"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageUrl: [],
				progress: [{
					num: 4,
					content: "继承人信息"
				}, {
					num: 5,
					content: "近亲属信息"
				}, {
					num: 6,
					content: "纸质遗嘱上传",
					isActive: true
				}, {
					num: 7,
					content: "遗嘱朗读"
				}]
			}
		},
		methods: {
			uploadImage() {
				if (this.imageUrl.length >= 6) {
					return uni.showToast({
						title: "不能选择更多的图片"
					})
				}
				uni.chooseImage({ // 最多上传六张
					count: 6 - this.imageUrl.length,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: (res) => {
						this.imageUrl.push(...res.tempFilePaths)
					}
				});
			},
			deleteImage(index) {
				this.imageUrl.splice(index, 1)
			}
		}
	}
</script>

<style lang="scss">
	.wrap {
		height: 100%;
		width: 100%;
		background: #F6F6F6;


		.bottom-card {
			height: 80%;
			width: calc(100%-44rpx);
			margin: 22rpx 0 0;
			background: #FFFFFF;
			border-radius: 20px 20px 0 0;
			overflow: hidden;

			.bottom-cad-title {
				margin-top: 44rpx;
				margin-left: 30rpx;
				font-size: 30rpx;
				font-weight: 500;
				color: #333333;
			}

			.bootom-second {
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #CCCCCC;
				margin-top: 10rpx;
				margin-left: 30rpx;
			}

			.upload-btn {
				width: 100rpx;
				height: 100rpx;
				background: #F8F8F8;
				border-radius: 10px;
				margin-top: 50rpx;
				margin-left: 24rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.image-box {
				height: 530rpx;
				width: calc(100% - 22rpx);
				margin-left: 22rpx;
				margin-top: 60rpx;
				display: flex;
				flex-wrap: wrap;

				.image-item {
					height: 253rpx;
					width: 200rpx;
					position: relative;
					margin-right: 24rpx;
					margin-bottom: 24rpx;

					.close-btn {
						position: absolute;
						right: -16rpx;
						top: -16rpx;
						width: 32rpx;
						height: 32rpx;
						border-radius: 50%;
						overflow: hidden;
					}
				}
			}

			.btn-box {
				display: flex;
				align-items: center;
				justify-content: space-around;
				margin-top: 75rpx;

				.save-btn {
					width: 300rpx;
					height: 88rpx;
					border: 1px solid #53B3D9;
					border-radius: 44rpx;
					font-size: 30rpx;
					font-weight: 500;
					color: #53B3D9;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.next-btn {
					width: 300rpx;
					height: 88rpx;
					background: #53B3D9;
					border-radius: 44rpx;
					font-size: 30rpx;
					font-weight: 500;
					color: #FFFFFF;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}
</style>
